<template>
  <div id="viewDetails">
    <h1 class="con-right-title">
      <i class="fa fa-reply" @click="goBack"></i>
      问卷调查活动管理/查看详情
    </h1>
    <!-- tabs标签 -->
    <div class="tabs">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane name="activeFile" label="活动档案">
          <!-- 内容部分 -->
          <div class="flie-content">
            <el-row
              v-for="(item, index) of activeFile"
              :key="index"
              :gutter="8"
            >
              <el-col :span="2">
                {{ item.key }}
              </el-col>
              <el-col :span="6">
                {{ item.value }}
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane name="activeShow" label="活动展示">
          <!-- 活动展示内容部分 -->
          <div class="show-content">
            <!-- 活动列表页 -->
            <div class="active-list">
              <div class="title">
                <div class="title-line"></div>
                <div>活动列表页</div>
              </div>
              <el-row :gutter="20" class="list-row">
                <el-col :span="2">
                  展示名称:
                </el-col>
                <el-col :span="6" :offset="1">
                  问卷调查
                </el-col>
              </el-row>
              <el-row :gutter="20" class="list-row">
                <el-col :span="2">
                  活动封面:
                </el-col>
                <el-col
                  :span="6"
                  :offset="1"
                >
                  <img
                    src="@/assets/img/defPic.png"
                    alt=""
                  />
                </el-col>
              </el-row>
            </div>
            <!-- 活动详情页 -->
            <div class="active-detail">
              <div class="title">
                <div class="title-line"></div>
                <div>活动详情页</div>
              </div>
              <el-row class="detail-row">
                <el-col :span="3">
                  活动H5页面:
                </el-col>
                <el-col :span="6">
                  https://www.baidu.com
                </el-col>
              </el-row>
            </div>
            <!-- 问卷展示页 -->
            <div class="ques-show">
              <div class="title">
                <div class="title-line"></div>
                <div>问卷展示页</div>
              </div>
              <el-row :gutter="60" class="show-row">
                <el-col :span="3">
                  活动结束H5页面:
                </el-col>
                <el-col :span="6" :offset="1">
                  https://www.baidu.com
                </el-col>
              </el-row>
            </div>
            <!-- 活动结束详情页 -->
            <div class="end-detail">
              <div class="title">
                <div class="title-line"></div>
                <div>活动结束详情页</div>
              </div>
              <el-row :gutter="60" class="end-row">
                <el-col :span="3">
                  活动结束H5页面:
                </el-col>
                <el-col :span="6" :offset="1">
                  https://www.baidu.com
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="img-right">
            <img src="/static/img/tel.jpg" alt="" />
          </div>
        </el-tab-pane>
        <el-tab-pane name="activeRule" label="活动规则">
          <!-- 内容部分 -->
          <div class="rule-content">
            <el-row :gutter="5">
              <el-col :span="3">
                问卷有效时长:
              </el-col>
              <el-col :span="4">
                2019-03-05至2019-05-06
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane name="touchSetting" label="触达设置">
          <div class="touch-content">
            <!-- 触达设置表格部分 -->
            <el-table :data="touchTableData" style="width: 50%">
              <el-table-column
                type="index"
                width="60"
                align="center"
                label="序号"
              >
                <template slot-scope="scope">
                  {{ scope.$index | filterPage(searchParams.pageNum, searchParams.pageSize) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="touchRule"
                label="触达规则"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="publishTime"
                label="发布时间"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="touchChanel"
                label="触达渠道"
                align="center"
              ></el-table-column>
            </el-table>
            <!-- 右侧图片 -->
            <div class="touch-img">
              <img src="/static/img/tel.jpg" alt="" />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="prizeSetting" label="奖品设置">
          <div class="prize-content">
            <!-- 奖品设置表格部分 -->
            <el-table :data="prizeTableData" style="width: 70%">
              <el-table-column
                type="index"
                width="60"
                align="center"
                label="序号"
              >
                <template slot-scope="scope">
                  {{
                    scope.$index
                      | filterPage(searchParams.pageNum, searchParams.pageSize)
                  }}
                </template>
              </el-table-column>
              <el-table-column
                prop="prizeName"
                label="奖品名称"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="prizePeople"
                label="获奖用户"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="issueNum"
                label="发放数量"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="description"
                label="说明"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="duration"
                label="有效期"
                align="center"
                width="220"
              ></el-table-column>
            </el-table>
            <!-- 右侧图片 -->
            <div class="prize-img">
              <img src="/static/img/tel.jpg" alt="" />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QuestionnaireDetails',
  msg: '问卷调查活动管理-查看详情',
  data() {
    return {
      activeName: 'activeFile', // tabs标签页活动页
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10, // 页面显示条数
        orderByColumn: 'postSort', // 排序字段
        isAsc: 'asc' // 正序倒序
      },
      // 活动档案
      activeFile: [
        { key: '活动分类:', value: '问卷调查' },
        { key: '活动名称:', value: '人口问卷调查' },
        { key: '活动描述:', value: '征集学员作品,官方评选获奖用户' },
        { key: '备注:', value: '此活动针对所有用户' }
      ],
      // 触达设置表格数据
      touchTableData: [
        {
          touchRule: '参与XX活动人群', // 触达规则
          publishTime: '2019-03-20', // 发布时间
          touchChanel: '短信触达' // 触达渠道
        },
        {
          touchRule: '参与XX活动人群', // 触达规则
          publishTime: '2019-03-20', // 发布时间
          touchChanel: '推送触达' // 触达渠道
        }
      ],
      // 奖品设置表格数据
      prizeTableData: [
        {
          prizeName: '满90-20', // 奖品名称
          prizePeople: 'A用户', // 获奖用户
          issueNum: 22, // 发放数量
          description: '仅适用于<<PS功能课>>', // 说明
          duration: '2019-08-08 至 2019-09-08' // 有效期
        },
        {
          prizeName: '满90-20', // 奖品名称
          prizePeople: 'A用户', // 获奖用户
          issueNum: 22, // 发放数量
          description: '仅适用于<<PS功能课>>', // 说明
          duration: '2019-08-08 至 2019-09-08' // 有效期
        }
      ]
    }
  },
  mounted() {},
  methods: {
    // 点击tabs标签页
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 返回上一页
    goBack() {}
  }
}
</script>

<style lang="less">
#viewDetails {
  .tabs {
    .el-tab-pane {
      padding: 0 !important;
      .flie-content {
        margin-left: 60px;
        margin-top: 50px;
        .el-row {
          margin-bottom: 30px;
          .el-col:first-child {
            font-size: 14px;
            color: #888e9e;
          }
          .el-col:last-child {
            font-size: 14px;
          }
        }
      }
      .rule-content {
        margin-left: 60px;
        margin-top: 50px;
        .el-row {
          margin-bottom: 30px;
          .el-col:first-child {
            font-size: 14px;
            color: #888e9e;
          }
          .el-col:last-child {
            font-size: 14px;
          }
        }
      }
      .show-content {
        margin-left: 30px;
        margin-top: 20px;
        .active-list {
          margin-bottom: 40px;
        }
        .active-detail {
          margin-bottom: 60px;
        }
        .ques-show {
          margin-bottom: 60px;
        }
        .title {
          display: flex;
          align-items: center;
          font-size: 20px;
          .title-line {
            margin-right: 5px;
            width: 4px;
            height: 15px;
            background: #1dc8a4;
          }
        }
        .list-row {
          margin-left: 60px !important;
          margin-top: 30px;
          margin-bottom: 20px;
          .el-col:first-child {
            font-size: 16px;
            color: #888e9e;
          }
          .el-col:last-child {
            font-size: 16px;
          }
        }
        .detail-row {
          margin-left: 30px !important;
          margin-top: 30px;
          margin-bottom: 20px;
          .el-col:first-child {
            font-size: 16px;
            color: #888e9e;
          }
          .el-col:last-child {
            margin-left: 41px;
            font-size: 16px;
          }
        }
        .show-row {
          margin-top: 30px;
          margin-bottom: 20px;
          .el-col:first-child {
            font-size: 16px;
            color: #888e9e;
          }
          .el-col:last-child {
            font-size: 16px;
          }
        }
        .end-row {
          margin-top: 30px;
          margin-bottom: 20px;
          .el-col:first-child {
            font-size: 16px;
            color: #888e9e;
          }
          .el-col:last-child {
            font-size: 16px;
          }
        }
      }
    }
    span {
      padding: 7px 20px 0;
      width: 100%;
      font-size: 16px;
      font-weight: 700;
    }
  }
  .el-tabs.el-tabs--card.el-tabs--top {
    margin-top: 10px;
  }

  .el-tabs__nav-wrap {
    padding-left: 30px;
  }

  .el-tabs__item {
    height: 30px;
    line-height: 30px;
    font-size: 13px;

    &.is-active {
      color: #0d1636;
      border-top: 2px solid #00d7aa;
      margin-top: -1px;
    }
    &:hover {
      color: #00d7aa;
    }
  }
  .img-right {
    position: relative;
    left: 700px;
    top: -630px;
  }
  .touch-img {
    position: relative;
    left: 765px;
    top: -70px;
  }
  .prize-img {
    position: relative;
    left: 1090px;
    top: -80px;
  }
}
</style>
